<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script src="./d3.js"></script>
<script>
    // const myScal = d3.scaleLinear().domain([0, 10]).range([-1000, 1000])
    // console.log(myScal(5));
    const a = "qwertyuioplkjhgfdsamnbvcxz"
    const getData = () => {
        return [
            {name: "shao-kui", value: 6},
            {name: "shao-kui", value: 16},
            {name: "shao-kui", value: 6},
            {name: "shao-kui", value: 6},
            {name: "shao-kui", value: 6},
            {name: "shao-kui", value: 6},
            {name: "shao-kui", value: 6},
            {name: "shao-kui", value: 6},
            {name: "shao-kui", value: 6},
            {name: "shao-kui", value: 6},
            {name: "shao-kui", value: 6},
            {name: "shao-kui", value: 6},
            {name: "shao-kui", value: 6},
            {name: "shao-kui", value: 6},
            {name: "shao-kui", value: 6},
        ].map(item => {
            const in1 = parseInt(Math.random() * 26)
            const in2 = parseInt(Math.random() * 26)
            const in3 = parseInt(Math.random() * 26)
            const in4 = parseInt(Math.random() * 26)
            const in5 = parseInt(Math.random() * 26)

            return {
                name: `${a[in1]}${a[in2]}-${a[in3]}${a[in4]}${a[in5]}`,
                value: in1
            }
        })
    }

    const setValue = (val) => {
        return val.map((item, i) => {
            const int1 = parseInt(Math.random() * 26)
            if (i === 0) {
                return {
                    ...val[1],
                    value: int1
                }
            } else if (i === 1) {
                return {
                    ...val[0],
                    value: int1
                }
            } else {
                return {
                    ...item,
                    value: int1
                }
            }
        })
    }
    const data = getData()

    console.log(data);
    // console.log(setValue(data));
    const svg = d3.select('body').append('svg').attr('width', 900).attr('height', 600).attr('id', "mainsvg").attr('class', "svgs")
    const width = svg.attr("width")
    const height = svg.attr("height")
    const margin = {top: 60, right: 60, bottom: 60, left: 50};
    const innerWidth = width - margin.left - margin.right;
    const innerHeight = height - margin.top - margin.bottom;
    const xSCale = d3.scaleLinear()
        .domain([0, d3.max(data, (item) => item.value)])//设置数据规则
        .range([0, innerWidth])//设置起始与终止点坐标
    const yScale = d3.scaleBand()
        .domain(data.map(item => item.name))
        .range([0, innerHeight])
        .padding(0.1)//设置间隔  1为10%

    const g = svg.append('g').attr('id', 'maingroup').attr('transform', `translate(${margin.left}, ${margin.top})`)
    const yAxis = d3.axisLeft(yScale)
    // .tickSize(-innerWidth)//设置中心直线 刻度标记方向为正方向
    g.append('g').call(yAxis)
    const xAxis = d3.axisBottom(xSCale)
    // .tickSize(-height)
    // 将刻度尺添加于屏幕 //!须借助于g标签，  call为d3中元素带有函数
    g.append('g').call(xAxis).attr('transform', `translate(0, ${innerHeight})`)
    // 手动添加
    data.forEach(d => {
        g.append('rect')
            .attr('width', xSCale(d.value))//取出每一个元素根据value计算出来的宽度
            .attr('height', yScale.bandwidth())//取出每一个条带有多宽
            .attr('fill', 'green')
            .attr('class', "dataview")
            .attr('y', yScale(d.name))//人名映射到屏幕空间的位置
            .attr('opacity', '0.6')
    })

    // 自动添加
    // g.select(".dataview").data(data).enter().append("rect")
    //     .attr('class', 'dataview')
    //     .attr('width', d => xSCale(d.value))//取出每一个元素根据value计算出来的宽度
    //     .attr('height', yScale.bandwidth())//取出每一个条带有多宽
    //     .attr('fill', 'green')
    //     .attr('y', d => yScale(d.name))//人名映射到屏幕空间的位置
    //     .attr('opacity', '0.6')

    // --------------------------------------------------------------------------
    // const data2 = setValue(data).concat({name: "aaa", value: 26})
    d3.selectAll('.dataview').data(data).transition().duration(1000).attr('width', d => {
        console.log({d});
        return xSCale(d.value)
    })
    // d3.selectAll('.dataview').data(setValue(data)).join("rect").transition().duration(1000).attr('width', d => xSCale(d.value))
    // setTimeout(() => {
    //     console.log(data2);
    //     console.log(d3.selectAll('rect'));
    //     // , (e) => {
    //     //     console.log({e});
    //     //     return e ? e.name: ""
    //     // }  因为之前没有data（）绑定过数据所以会报错
    //     // transition 开启动画状态   duration 过渡时长
    //     d3.selectAll('.dataview').data(data2, d => d?.name).transition().duration(1000).attr('width', d => {
    //         console.log({d});
    //         return xSCale(d.value)
    //     })
    // }, 2000)
    // --------------------------------------------------------------------------

    // 修改刻度标记元素  tick为d3为每一刻度设置的class
    d3.selectAll('.tick text').attr('font-size', '1.2em')
    // 添加表头
    g.append('text')
        .text('练习的第一个表格')
        .attr('font-size', '2em')
        .attr('transform', `translate(${innerWidth / 2}, -20)`)
        .attr('text-anchor', 'middle')
</script>

</html>
